<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../images/logo-mi2.png" type="image/x-icon">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/interface.js"></script>
</head>

<body>
    <div class="top">

    </div>


    <div class="swiper">
        <div class="home-hero">
            <ul class="swiper-container cl">
                <li><img src="../images/switch_1.jpg" alt=""></li>
                <li><img src="../images/switch_21.jpg" alt=""></li>
                <li><img src="../images/switch_22.jpg" alt=""></li>
                <li><img src="../images/switch_23.jpg" alt=""></li>
                <li><img src="../images/switch_24.jpg" alt=""></li>
                <li><img src="../images/switch_25.jpg" alt=""></li>
                <li><img src="../images/switch_1.jpg" alt=""></li>
            </ul>
            <div class="swiper-nav">
                <ul>
                    <li>
                        <a href="javascript:;">
                            手机
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            电视
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            笔记本 平板
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            家电
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            出行 穿戴
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            智能 路由器
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            电源 配件
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            健康 儿童
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            耳机 音箱
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            生活 箱包
                            <em class="iconfont iconfont-arrow">&#xe8d4;</em>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="swiper-pagination">
                <a href="javascript:;" class="swiper-pagination-bullet swiper-pagination-bullet-active"></a>
                <a href="javascript:;" class="swiper-pagination-bullet"></a>
                <a href="javascript:;" class="swiper-pagination-bullet"></a>
                <a href="javascript:;" class="swiper-pagination-bullet"></a>
                <a href="javascript:;" class="swiper-pagination-bullet"></a>
                <a href="javascript:;" class="swiper-pagination-bullet"></a>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper-row cl">
            <div class="span4">
                <ul class="home-channel-list cl">
                    <li><a href=""><img src="../images/span_3.png" alt="">保障服务</a></li>
                    <li><a href=""><img src="../images/span_4.png" alt="">企业团购</a></li>
                    <li><a href=""><img src="../images/span_5.png" alt="">F码通道</a></li>
                    <li><a href=""><img src="../images/span_2.png" alt="">米粉卡</a></li>
                    <li><a href=""><img src="../images/span_6.png" alt="">以旧换新</a></li>
                    <li><a href=""><img src="../images/span_1.png" alt="">话费充值</a></li>
                </ul>
            </div>
            <div class="span16">
                <ul class="home-promo-list cl">
                    <li>
                        <a href=""><img src="../images/home-promo-list_2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="../images/home-promo-list_1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="../images/home-promo-list_1.png" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="page-main">
        <div class="container">
            <div class="home-banner-box">
                <a href=""><img src="../images/home-banner-box.jpg" alt=""></a>
            </div>


            <!-- ------------------------------- -->

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">手机</h2>
                    <div class="more">
                        <a href="./search.html?key=手机">
                            查看更多
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <div class="row">
                        <div class="span4">
                            <ul>
                                <li><a href=""><img src="../images/phone_6.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="brick-list" id="phoneList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ------------------------------- -->

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">家电</h2>
                    <div class="more">
                        <a href="./search.html?key=家电">
                            查看更多
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <div class="row">
                        <div class="span4">
                            <ul>
                                <li><a href=""><img src="../images/phone_6.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="brick-list" id="jdList">
                                <!-- <li class="brick-item">
                                    <a href="">
                                        <div class="figure-img">
                                            <img src="./images/phone_1.png" alt="">
                                        </div>
                                        <h3 class="title">
                                            小米11 青春版
                                        </h3>
                                        <p class="desc">小米11 青春版 轻薄</p>
                                        <p class="price">
                                            <span>1999</span>元起
                                        </p>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ------------------------------- -->

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">智能</h2>
                    <div class="more">
                        <a href="./search.html?key=智能">
                            查看更多
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <div class="row">
                        <div class="span4">
                            <ul>
                                <li><a href=""><img src="../images/phone_6.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="brick-list" id="znList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ------------------------------- -->

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">配件</h2>
                    <div class="more">
                        <a href="./search.html?key=配件">
                            查看更多
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <div class="row">
                        <div class="span4">
                            <ul>
                                <li><a href=""><img src="../images/phone_6.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="brick-list" id="pjList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ------------------------------- -->

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">手环</h2>
                    <div class="more">
                        <a href="./search.html?key=手环">
                            查看更多
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <div class="row">
                        <div class="span4">
                            <ul>
                                <li><a href=""><img src="../images/phone_6.jpg" alt=""></a></li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="brick-list" id="zbList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>


            <div class="home-banner-box">
                <a href=""><img src="../images/home-banner-box1.jpg" alt=""></a>
            </div>

            <div class="home-brick-box">
                <div class="box-hd">
                    <h2 class="title">视频</h2>
                    <div class="more">
                        <a href="">
                            查看全部
                            <i class="iconfont iconfont-arrow-right-big">&#xe65a;</i>
                        </a>
                    </div>
                </div>
                <div class="box-bd cl">
                    <ul class="video-list">
                        <li class="video-item">
                            <a href="">
                                <div class="figure-img">
                                    <img src="../images/videos_4.jpg" alt="">
                                    <i class="iconfont">&#xe698;</i>
                                </div>
                                <h3 class="title">
                                    2021年春季新品发布会第一场
                                </h3>
                                <!-- <p class="desc">小米11 青春版 轻薄</p> -->
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="">
                                <div class="figure-img">
                                    <img src="../images/videos_2.jpg" alt="">
                                    <i class="iconfont">&#xe698;</i>
                                </div>
                                <h3 class="title">
                                    Redmi 10X系列发布会
                                </h3>
                                <p class="desc">
                                    Redmi 10X系列发布会
                                </p>
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="">
                                <div class="figure-img">
                                    <img src="../images/videos_3.jpg" alt="">
                                    <i class="iconfont">&#xe698;</i>
                                </div>
                                <h3 class="title">
                                    小米10 青春版 发布会
                                </h3>
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="">
                                <div class="figure-img">
                                    <img src="../images/videos_1.jpg" alt="">
                                    <i class="iconfont">&#xe698;</i>
                                </div>
                                <h3 class="title">
                                    小米10 8K手机拍大片
                                </h3>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>



    </div>


    <div class="footer">

    </div>
</body>
<script>

    $(document).ready(function () {
        $(".top").load("./header.html")
        $(".footer").load("./footer.html")
    })
    $(function () {
        var user = getCookie("lgc");
        if (user) {
            // tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
            $(".title-right").html(`欢迎您,${user} <button onclick="exit()">退出</button>`);
        }


        // 轮播图事件
        var index = 0;  // 全局变量 记录轮播的下标
        var timer = null;

        autoPlay(); // 页面加载时 开启自动轮播

        $(".swiper-pagination a").each(function (i, item) {
            $(item).click(function () {
                console.log(i);
                index = i; // 记录点击的位置 => 如果自动轮播从当前位置开始
                move();
            })
        })
        $(".home-hero").mouseenter(function () {
            clearInterval(timer);
        })
        $(".home-hero").mouseleave(function () {
            autoPlay();
        })

        $(".swiper-button-prev").click(function () {
            index--;
            move();
        })
        $(".swiper-button-next").click(function () {
            index++;
            move();
        })

        function autoPlay() {
            timer = setInterval(function () {
                index++;
                move();
            }, 3000)
        }

        function move() {
            // 右键连点时  => animate()的回调函数指望不上 (不执行 => 没有办法从第五张切第一张)
            // 右键连点时  因为第五张和第一张相同, 连点时超出第五张 => 期望显示第二张
            // 如何滚动?  如果超出第五张瞬间切为 第一张 滚动到  第二张
            var liList = $(".swiper-pagination a").size();
            console.log(liList);
            if (index > liList) { // index > 4
                // swiperBar.style.left = 0;   //切到第一张 
                $(".swiper-container").css({ left: "0" });
                index = 0;    // 同步下标
                index++;      // 滚动到第二张
            }

            // 左键连点时  => animate()的回调函数指望不上 (不执行 => 没有办法从第五张切第一张)
            // 左键连点时  期望看到的效果  第一张 滚动到 第四张
            // 如何滚动?
            // 如果下标为0时(第一张)  继续点击左键 => 小于0(滚动到 第四张) 
            // 第一张  切  第五张 

            if (index < 0) { // index > 4
                index = liList;
                // swiperBar.style.left = -swiperWidth * index + "px";   //切到第五张 
                $(".swiper-container").css({ left: -($(".home-hero").width()) * index + 'px' });
                index--;   //滚动到第四张
            }

            console.log(index);
            for (var j = 0; j < liList; j++) {
                // liList[j].className = "";
                $(".swiper-pagination").children().eq(j).removeClass("swiper-pagination-bullet-active");
            }
            // index >= liList.length ? 0 : index  如果是第五张 把第一个点变为活跃状态
            // liList[index >= liList.length ? 0 : index].className = "active";
            $(".swiper-pagination").children().eq(index >= liList ? 0 : index).addClass("swiper-pagination-bullet-active");
            $(".swiper-container").animate({
                left: -($(".home-hero").width()) * index, function() {
                    if (index >= liList) {
                        // swiperBar.style.left = 0;
                        $(".swiper-container").css({ left: 0 })
                        index = 0;
                    }
                }
            })
        }



        // -------------------------------------------------------------------------------------------------------------------

        // 页面加载商品生成页面
        // 手机
        searchGradeOrderLimit({ key: "手机", orderCol: "goodsId", orderType: "asc", pageIndex: "1", showNum: "8" }).then(data => {
            var { status, msg, currentIndex, count, maxPage, list } = data;
            var html = ""
            list.forEach(function (item) {
                console.log(item);

                var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="brick-item">
                            <a href="./detail.html?gid=${goodsId}">
                                <div class="figure-img">
                                    <img src="${goodsImg}" alt="">
                                </div>
                                <h3 class="title">
                                    ${goodsName}
                                </h3>
                                <p class="desc">天玑1100年度旗舰芯</p>
                                <p class="price">
                                    <span>${goodsPrice}</span>元起
                                </p>
                            </a>
                        </li>`
            })
            $("#phoneList").html(html);
        }).catch(err => {
            throw err;
        })

        // 家电
        searchGradeOrderLimit({ key: "家电", orderCol: "goodsId", orderType: "asc", pageIndex: "1", showNum: "8" }).then(data => {
            var { status, msg, currentIndex, count, maxPage, list } = data;
            var html = ""
            list.forEach(function (item) {
                console.log(item);

                var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="brick-item">
                            <a href="./detail.html?gid=${goodsId}">
                                <div class="figure-img">
                                    <img src="${goodsImg}" alt="">
                                </div>
                                <h3 class="title">
                                    ${goodsName}
                                </h3>
                                <p class="desc">天玑1100年度旗舰芯</p>
                                <p class="price">
                                    <span>${goodsPrice}</span>元起
                                </p>
                            </a>
                        </li>`
            })
            $("#jdList").html(html);
        }).catch(err => {
            throw err;
        })

        // 智能
        searchGradeOrderLimit({ key: "智能", orderCol: "goodsId", orderType: "asc", pageIndex: "1", showNum: "8" }).then(data => {
            var { status, msg, currentIndex, count, maxPage, list } = data;
            var html = ""
            list.forEach(function (item) {
                console.log(item);

                var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="brick-item">
                            <a href="./detail.html?gid=${goodsId}">
                                <div class="figure-img">
                                    <img src="${goodsImg}" alt="">
                                </div>
                                <h3 class="title">
                                    ${goodsName}
                                </h3>
                                <p class="desc">天玑1100年度旗舰芯</p>
                                <p class="price">
                                    <span>${goodsPrice}</span>元起
                                </p>
                            </a>
                        </li>`
            })
            $("#znList").html(html);
        }).catch(err => {
            throw err;
        })

        // 配件
        searchGradeOrderLimit({ key: "耳机", orderCol: "goodsId", orderType: "asc", pageIndex: "1", showNum: "8" }).then(data => {
            var { status, msg, currentIndex, count, maxPage, list } = data;
            var html = ""
            list.forEach(function (item) {
                console.log(item);

                var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="brick-item">
                            <a href="./detail.html?gid=${goodsId}">
                                <div class="figure-img">
                                    <img src="${goodsImg}" alt="">
                                </div>
                                <h3 class="title">
                                    ${goodsName}
                                </h3>
                                <p class="desc">天玑1100年度旗舰芯</p>
                                <p class="price">
                                    <span>${goodsPrice}</span>元起
                                </p>
                            </a>
                        </li>`
            })
            $("#pjList").html(html);
        }).catch(err => {
            throw err;
        })

        // 手环
        searchGradeOrderLimit({ key: "手环", orderCol: "goodsId", orderType: "asc", pageIndex: "1", showNum: "8" }).then(data => {
            var { status, msg, currentIndex, count, maxPage, list } = data;
            var html = ""
            list.forEach(function (item) {
                console.log(item);

                var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                html += `<li class="brick-item">
                            <a href="./detail.html?gid=${goodsId}">
                                <div class="figure-img">
                                    <img src="${goodsImg}" alt="">
                                </div>
                                <h3 class="title">
                                    ${goodsName}
                                </h3>
                                <p class="desc">天玑1100年度旗舰芯</p>
                                <p class="price">
                                    <span>${goodsPrice}</span>元起
                                </p>
                            </a>
                        </li>`
            })
            $("#zbList").html(html);
        }).catch(err => {
            throw err;
        })
    })



    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>